<template>
  <div class="input" :class="{ disabled: disabled }">
    <div class="label" :style="{ width: `${labelWidth}rpx` }">
      {{ label }}
    </div>
    <div class="right-wrap">
      <input
        :value="value"
        :type="type"
        :placeholder="pr"
        :disabled="disabled"
        :style="{ textAlign: textAlign }"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      <i class="iconfont close" v-show="value && clearable && !disabled" @click="reset">&#xe66f;</i>
    </div>
    <div class="line" v-show="line"></div>
  </div>
</template>

<script>
  export default {
    name: "Input",
    props: {
      value: {
        type: String,
        default: ''
      },
      // 左侧文案
      label: {
        type: String,
        default: ''
      },
      // 左侧文案宽度
      labelWidth: {
        type: Number,
        default: 120,
      },
      // 类型，可选值为 text number password 等
      type: {
        type: String,
        default: 'text'
      },
      // 为空时占位符
      pr: {
        type: String,
        default: ''
      },
      // 底部线条 
      line: {
        type: Boolean,
        default: false
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 对齐方式
      textAlign: {
        type: String,
        default: "left",
      },
      // 是否展示清除 icon
      clearable: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {};
    },
    methods: {
      handleInput(e) {
        this.$emit("input", e.target.value);
      },
      handleFocus(e) {
        this.$emit('focus', e)
      },
      handleBlur(e) {
        this.$emit('blur', e)
      },
      reset() {
        this.$emit("input", '')
        this.$emit('clear')
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
